<template>
    <div class="cswd-dnld">
        <img
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/cswd_zjwd_nav.png"
            class="cswd_zjwd"
            alt="专家问答"
        />

        <div class="data-list">
            <div
                v-for="(item, index) in problemList2"
                :key="index"
                class="item"
            >
                <div class="avatar">
                    <img
                        :src="item.userinfo.avatar"
                        :alt="item.userinfo.nickname"
                    />
                    <div>
                        <div
                            :style="{
                                background: get_is_online_color(item.is_online),
                            }"
                            class="spot"
                        ></div>
                        {{ get_is_online_text(item.is_online) }}
                    </div>
                </div>
                <div class="info">
                    <div class="name">
                        {{ item.userinfo.nickname }}
                        <img
                            src="~/assets/images/cswd/authentication.png"
                            alt=""
                        />
                    </div>
                    <div class="major_types">
                        {{ item.major_types.replace(/,/g, " | ") }}
                    </div>
                    <div class="direction">
                        擅长：{{ item.userinfo.major_direction }}
                    </div>
                </div>
                <div class="but" @click="show = true">提问</div>
            </div>
        </div>

        <van-dialog
            v-model="show"
            title=""
            show-cancel-button
            confirm-button-text="下载APP"
            confirm-button-color="#0177FD"
            @confirm="downLoadAPP"
        >
            <div class="moban-dialog">
                <div class="text1">下载小竹财税APP</div>
                <div class="text2">立即提问</div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import {
    major_list,
    getLaizhanList,
    getJhmjList,
    get_major_apply,
} from "@/assets/api/csjhApi";

import { getanalysedata } from "@/assets/api/indexApi";

import { getmessage_count } from "@/assets/api/userCenterApi";
import { mapState, mapMutations } from "vuex";

import { goTopSmooth, getTime3, downLoadAPP2 } from "@/assets/utils/utils";

export default {
    components: {},
    async asyncData({ params }) {
        let data = {
            page: 1,
            problemList2: [],
            zjwd_total: 0,
        };

        const res = await major_list({
            page: 1,
            pagesize: data.limit,
        });
        if (res.code == 1) {
            data.problemList2 = res.data.data;
            if (res.data.data.length > 0) data.zjwd_total = res.data.allcount;
        }

        return data;
    },
    head() {
        return {
            title: "小竹问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            problemList3: [],
            dnld_total: 0,
            downLoadAPP: downLoadAPP2,
            count: 0,
            show: false,
            // sort: 2,
            dataLoading: false,

            get_is_online_color: function (is_online) {
                if (is_online == 0) return "#c2c2c2";
                else if (is_online == 1) return "#58c256";
                else if (is_online == 2) return "#ff6161";
            },
            get_is_online_text: function (is_online) {
                if (is_online == 0) return "离线";
                else if (is_online == 1) return "在线";
                else if (is_online == 2) return "忙碌";
            },
        };
    },
    created() {},
    mounted() {
        console.log(this.problemList2);
        // if (this.tabCurent == "cswdcate") {
        //     this.$router.replace({ path: "/404" });
        // }
        this.getList();
    },
    watch: {
        // $route: function (to, form) {
        //     try {
        //         this.page = parseInt(to.params.page.replace(".html", ""));
        //         this.tabCurent = to.params.tab.replace(".html", "");
        //         this.getList();
        //     } catch (error) {}
        // },
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            messageCount: (state) => state.messageCount,
        }),
    },
    methods: {
        ...mapMutations("common", [
            "setloginShow",
            "setmenuIndex",
            "set_messageCount",
        ]),

        // 获取数据
        getList() {
            goTopSmooth();
            let params = {
                m_id: 4,
                type: 1,
                describe: "专家问答",
                code: "PC3",
            };

            getanalysedata(params);
        },

        // 专家问答
        async getZjwd() {
            this.dataLoading = true;
            const res = await major_list({
                page: this.page,
                pagesize: this.limit,
            });
            this.dataLoading = false;
            if (res.code == 1) {
                this.problemList2 = res.data.data;
                if (res.data.data.length > 0)
                    this.zjwd_total = res.data.allcount;
            }
        },
    },
};
</script>


<style lang="scss" scoped>
.cswd-dnld {
    background-color: #f6f6f6;
}
.cswd_zjwd {
    width: 100%;
    height: auto;
    display: block;
}

.data-list {
}
.item {
    padding: 1.1rem 0.95rem;
    padding-bottom: 1.8rem;
    background-color: #ffffff;
    margin: 0.65rem 0;
    display: flex;
    position: relative;
    .avatar {
        margin-right: 0.9rem;
        width: 4.53rem;
        img {
            width: 4.53rem;
            height: 4.53rem;
            border-radius: 6px;
            object-fit: cover;
        }
        > div {
            font-size: 0.624rem;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            .spot {
                width: 0.25rem;
                height: 0.25rem;
                border-radius: 0.25rem;
                margin-right: 0.4rem;
            }
        }
    }
    .info {
        .name {
            font-weight: 700;
            font-size: 1rem;
            color: #333333;
            img {
                height: 0.93rem;
                width: auto;
                margin-left: 0.5rem;
            }
        }
        .major_types {
            margin: 0.5rem 0;
            font-weight: 400;
            font-size: 0.75rem;
            color: #999999;
        }
        .direction {
            font-size: 0.75rem;
            color: #333333;
            width: 62vw;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏超出元素框的内容 */
            text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
        }
    }
    .but {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        width: 3.5rem;
        height: 1.75rem;
        border-radius: 1.75rem;
        font-size: 0.75rem;
        line-height: 1.75rem;
        text-align: center;
        color: #1b6fff;
        background: #edf6ff;
        &:active {
            opacity: 0.8;
        }
    }
}

.moban-dialog {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
    .text1 {
        font-size: 0.93rem;
        color: #222229;
        padding-bottom: 0.5rem;
    }
    .text2 {
        font-size: 1rem;
        font-weight: 600;
        color: #222229;
        span {
            color: #ff6161;
        }
    }
}
</style>
